import {
    AppstoreOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined
} from '@ant-design/icons';
import { Menu } from 'antd';
import React, { useState,useReducer } from 'react';
import { Link,  } from 'react-router-dom'
import classes from './Nav.module.css';
import NavContext from '../../store/cart-context';
const list = [
    {
        label: '菜单1',
        key: 'sub1',
        icon: <MailOutlined />,
        children: [
            {
                label: <Link to="/childMenu1-1">子菜单1-1</Link>,
                key: '1',
            },
            {
                label: <Link to="/childMenu1-2">子菜单1-2</Link>,
                key: '2',
            }

        ]
    },
    {
        label: '菜单2',
        key: 'sub2',
        icon: <AppstoreOutlined />,
        children: [
            {
                label: <Link to="/childMenu2-1">子菜单2-1</Link>,
                key: '3',
            },
            {
                label: <Link to="/childMenu2-2">子菜单2-2</Link>,
                key: '4',
            }

        ]
    }
]


const Nav = (props) => {
    console.log(props)
    const [collapsed, setCollapsed] = useState(false);
    const NavReducer = (state,actions) =>{
        const data = [...state]
        data.forEach((item,index)=>{
            item.children.forEach((citem,cindex)=>{
                if(citem.label.props.to === actions.path){
                    data[index].children[cindex].label = <Link to={actions.path}>{actions.name}</Link>
                }
            })
        })
        return data
    }
    const [NavList,NavDispatch] = useReducer(NavReducer,list)
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    
    return (
        <div style={{height:'100%'}}>
            <header className={`flex verticalcerter`}>
                <div className={classes.logo}>
                    <img style={{width:20,height:20,marginRight:10}} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
                    react</div>
                <div className={classes.user}>
                    <div style={{ color: '#fff' }}>admin</div>
                </div>
            </header>
            <NavContext.Provider value={{ NavList,NavDispatch }}>
                <div className={`flex`} style={{height:'100%'}}>
                    <div
                        style={{
                            width: 180,
                            height:'100%'
                        }}
                    >
                        <div
                            className={`${classes.btn} flex center`}
                            style={{width:collapsed?80:180}}
                            onClick={toggleCollapsed}
                        >
                            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        </div>
                        <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            theme="dark"
                            inlineCollapsed={collapsed}
                            items={NavList}
                        />
                    </div>
                    <div style={{ width: 200, height: 200 }}>
                        {props.children.map((item, index) => props.children[index])}
                    </div>
                </div>
            </NavContext.Provider>
        </div>
    );
};

export default Nav;